<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="车型名称：">
            <el-input
              v-model="page.name"
              placeholder="请输入车型名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="车型载重：">
            <el-input
              v-model="page.allowableLoad"
              placeholder="请输入车型载重"
            ></el-input>
          </el-form-item>
          <el-form-item label="车型体积：">
            <el-input
              v-model="page.allowableVolume"
              placeholder="请输入车型体积"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="cz">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <br />

    <el-dialog title="新增车型" :visible.sync="addTruck">
      <div style="text-align: left">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="*车型名称">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型名称"
              v-model="AddTruck.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="车型载重">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型载重"
              v-model="AddTruck.allowableLoad"
            >
              <template style="background-color: white" slot="append"
                >千克</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="车型体积">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型体积"
              v-model="AddTruck.allowableVolume"
            >
              <template style="background-color: white" slot="append"
                >方</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="长">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入长"
              v-model="AddTruck.measureLong"
            >
              <template style="background-color: white" slot="append"
                >米</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="宽">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入宽"
              v-model="AddTruck.measureWidth"
            >
              <template style="background-color: white" slot="append"
                >米</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="高">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入高"
              v-model="AddTruck.measureHigh"
            >
              <template style="background-color: white" slot="append"
                >米</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="货品类型">
            <el-select v-model="AddTruck.ids" multiple placeholder="请选择">
              <el-option
                v-for="(item, index) in goods"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qx">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑车型" :visible.sync="updateTruck">
      <div style="text-align: left">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="*车型名称">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型名称"
              v-model="updateTruckType.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="车型载重">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型载重"
              v-model="updateTruckType.allowableLoad"
            >
              <template style="background-color: white" slot="append"
                >千克</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="车型体积">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入车型体积"
              v-model="updateTruckType.allowableVolume"
            >
              <template style="background-color: white" slot="append"
                >方</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="长">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入长"
              v-model="updateTruckType.measureLong"
            >
              <template style="background-color: white" slot="append"
                >米</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="宽">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入宽"
              v-model="updateTruckType.measureWidth"
            >
              <template style="background-color: white" slot="append"
                >米</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="高">
            <el-input
              style="margin-right: 50%"
              placeholder="请输入高"
              v-model="updateTruckType.measureHigh"
            >
              <template style="background-color: white" slot="append"
                >米</template
              >
            </el-input>
          </el-form-item>
          <el-form-item label="货品类型">
            <el-select
              v-model="updateTruckType.ids"
              multiple
              placeholder="请选择"
              @change="$forceUpdate()"
            >
              <el-option
                v-for="(item, index) in goods"
                :key="index"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upqx">取 消</el-button>
        <el-button type="primary" @click="up">确 定</el-button>
      </div>
    </el-dialog>

    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-button style="margin-right: 90%" @click="Add" type="danger"
          >+新增车型</el-button
        >
      </el-form>
      <div>
        <el-table
          height="420px"
          :data="tableData"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
        >
          <el-table-column
            prop="truckTypeId"
            label="序号"
            width="120"
          ></el-table-column>
          <el-table-column prop="id" label="车型编号"></el-table-column>
          <el-table-column prop="name" label="车型名称"></el-table-column>
          <el-table-column
            prop="allowableLoad"
            label="车型载重(kg)"
          ></el-table-column>
          <el-table-column prop="allowableVolume" label="准载体积(方)">
          </el-table-column>
          <el-table-column prop="measureLong" label="长(米)"> </el-table-column>
          <el-table-column prop="measureWidth" label="宽(米)">
          </el-table-column>
          <el-table-column prop="measureHigh" label="高(米)"></el-table-column>
          <el-table-column label="适用货品类型">
            <template slot-scope="tags">
              <span v-for="tag in tags.row.baseGoodsTypes">
                <el-tag>{{ tag.name }}</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-link type="danger" @click="open(scope.row.truckTypeId)"
                >删除</el-link
              >|
              <!-- <el-link slot="reference" type="danger" @click="Del(scope.row.id)">删除</el-link>| -->
              <el-link type="primary" @click="update(scope.row)">编辑</el-link>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 7, 10]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  BaseTruckTypeList,
  ShowPdGoodsType,
  AddTruckType,
  DeleteTruckTypeByid,
  UpdateTruckType,
  DeleteGoodsTruck,
} from "@/api/wj/Vehicle";
export default {
  data() {
    return {
      tableData: [],
      formInline: {},
      visible: {},
      updateTruckType: {},
      Truck: {},
      addTruck: false,
      updateTruck: false,
      AddTruck: {
        ids: [],
      },
      currentPage4: 4,
      total: 10,
      page: {
        pageindex: 1,
        pagenum: 5,
        name: "",
        allowableLoad: "",
        allowableVolume: "",
      },
      baseGoodsTypes: [],
      goods: {},
    };
  },
  methods: {
    handleSizeChange(val) {
      this.page.pagenum = val;
      console.log(`每页 ${val} 条`);
      this.pageinfo();
    },
    handleCurrentChange(val) {
      this.page.pageindex = val;
      console.log(`当前页: ${val}`);
      this.pageinfo();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    onSubmit() {
      this.pageinfo();
    },
    cz() {
      this.page.name = "";
      this.page.allowableLoad = "";
      this.page.allowableVolume = "";
    },
    Add() {
      this.addTruck = true;
    },
    qx() {
      this.addTruck = false;
    },
    add() {
      AddTruckType(this.AddTruck).then((data) => {
        if (data.data > 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addTruck = false;
          this.pageinfo();
        }
      });
    },
    ShowDetails() {
      this.$router.push({ path: "/index/Vehicle/ShowDetails" });
      this.$message({
        message: "查看详情",
        type: "success",
      });
    },
    open(truckTypeId) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          DeleteTruckTypeByid(truckTypeId).then((data) => {
            if (data.data > 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.pageinfo();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    update(truckType) {
      // var options=[];
      //      truckType.forEach(res=>{
      //        var option={value:res.id,label:res.name}
      //        options.push(option)
      //      })
      //      this.options=options;
      this.updateTruckType = truckType;
      var ids = [];
      this.updateTruckType.baseGoodsTypes.forEach((item) => {
        ids.push(item.id);
      });
      this.updateTruckType.ids = ids;
      this.updateTruck = true;
    },
    upqx() {
      this.updateTruck = false;
    },
    up() {
      DeleteGoodsTruck(this.updateTruckType.truckTypeId).then((data) => {
        if (data.data > 0) {
          UpdateTruckType(this.updateTruckType).then((data) => {
            if (data.data > 0) {
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              this.updateTruck = false;
              this.pageinfo();
            }
          });
        }
      });
    },
    pageinfo() {
      BaseTruckTypeList(this.page).then((data) => {
        console.log(data.data.list);
        this.baseGoodsTypes = data.data.list.baseGoodsTypes;
        this.tableData = data.data.list;
        this.total = data.data.total;
      });
    },
    ShowGoodsType() {
      ShowPdGoodsType().then((data) => {
        console.log("assd", data.data);
        this.goods = data.data;
      });
    },
  },
  created() {
    this.pageinfo();
    this.ShowGoodsType();
  },
};
</script>

<style>
/* .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  } */
</style>